<template>
	<div id="school_recharge">
		<div class="content-recharge">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="250px" class="recharge-ruleForm">
				<el-form-item label="选择充值校区" prop="schoolName">
					<el-select style="width:3rem;" filterable v-model="ruleForm.schoolName" placeholder="请选择校区">
						<el-option
							v-for="item in schoolOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="充值金额" prop="money">
					<!-- <el-input style="width:3rem;" v-model.number="ruleForm.money" autocomplete="off"></el-input> -->
					<el-input-number class="charge-money" style="width:3rem;" v-model="ruleForm.money" :precision="2" :min="0" :max="100000000" :controls="false"></el-input-number>
					<span>元</span>
				</el-form-item>
				<el-form-item label="选择充值方式" prop="type">
					<el-select style="width:3rem;" v-model="ruleForm.type" placeholder="请选择方式">
						<el-option
							v-for="item in account_pay_mode"
							:key="item.value"
							:label="item.name"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="操作人" prop="operator">
					<el-input disabled style="width:3rem;" v-model="ruleForm.operator"></el-input>
				</el-form-item>
				<el-form-item label="交易号" prop="code">
					<el-input style="width:3rem;" v-model="ruleForm.code"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="resetElement" style="margin-left: 0.3rem;" @click="resetForm('ruleForm')">取消</el-button>
					<el-button class="resetElement" type="primary" @click="submitForm('ruleForm')">确定</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	let vm;
	export default{
		components:{},
		props:['schoolRecharge'],
		data(){
			var checkMoney = (rule, value, callback) => {
				if (value <= 0) {
					callback(new Error('金额必须大于0'));
				} 
				else if(value>100000000) {
					callback(new Error('金额必须小于100000000'));
				}
				else{
					callback();
				}
			};
			return {
				schoolOptions:[],
				ruleForm: {
					schoolName: '',
					money: '',
					type: '',
					operator: '',
					code: ''
				},
				rules: {
					schoolName: [
						{ required: true, message: '请选择充值校区', trigger: 'change' }
					],
					money: [
						{ required: true, message: '请输入充值金额', trigger: 'blur' },
						{ type:'number', message: '充值金额必须为数字', trigger: 'blur' },
						{ validator: checkMoney, trigger: 'blur' }
					],
					type: [
						{ required: true, message: '请选择充值方式', trigger: 'change' }
					],
					operator: [
						{ required: true, message: '请输入操作人', trigger: 'blur' }
					],
					code:[
						{ min: 0, max: 30, message: '长度在30个字符内', trigger: 'blur' }
					]
				},
				account_pay_mode:[]
			};
		},
		methods:{
			initByData(schoolList,accountInfo){
				this._accountInfo=accountInfo;
				this.$refs['ruleForm'].resetFields();
				this.ruleForm.schoolName=this.$store.state.campusId;
				this.schoolOptions=[];
				schoolList.forEach(element => {
					vm.schoolOptions.push({
						value:element.campusId,
						label:element.name
					});
				});
				this.ruleForm.operator=accountInfo.nickName;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						api.chargeForCampusAccount({
							campusId:this.ruleForm.schoolName,
							accountMoney:this.ruleForm.money,
							accountNo:this.ruleForm.code,
							accountPayMode:this.ruleForm.type,
							_wait:''
						}).then(function(d){
							// debugger
							if(d.resultCode==2000){
								vm.$emit('chargeOk',null);
								vm.$message({
									message: '校区充值成功！',
									type: 'success'
								});
								
							}
							else{
								vm.$message({
									message: d.message||'操作失败！',
									type: 'warning'
								});
							}
						});
						
					} else {
						
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.$emit('cancel',null);
			},
		},
		mounted(){
			this.account_pay_mode=tool.getDictNameByValue(-100,'account_pay_mode');
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss">
	#school_recharge{
		color: #333333;
		.content-recharge{
			.row{
				width: 100%;
				min-height: 0.16rem;
				margin: 0.08rem 0;
			}
			.el-form-item__label{
				font-size: 0.16rem !important;
			}
		}
		.charge-money{
			.el-input__inner{
				text-align: left !important;
			}
		}

		//鼠标悬浮
		.hoverpointer:hover{
			cursor: pointer;
		}
		// 滚动条
		.scrollbarstyle::-webkit-scrollbar {
			width: 0.05rem;
		}
		.scrollbarstyle::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.scrollbarstyle::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
	.schoolRechargePopup{
		.el-dialog{
			width: 8rem !important;
		}
	}
</style>